﻿@{
    ViewBag.Title = "Thông Tin Xe";
    Layout = "~/Views/Shared/_UserLayoutPage2.cshtml";
  
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="~/Script/Jquery%20Js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="~/Script/Jquery%20Js/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>
<script type="text/javascript">

    function dotooltip(hinh) {
        document.getElementById("hinh").src = hinh;
        document.getElementById("ToolTip").style.visibility = "visible";
    };
    document.onmousemove = function (e) {
        if (e == null)//neu la IE hoac chrome
        {
            mx = event.pageX;
            my = event.pageY;
        }
        else // firefox hoac operrator
        {
            mx = e.clientX;
            my = e.clientY;
        }
        div_tt = document.getElementById("ToolTip").style;
        if (mx > 880)
        { div_tt.left = (mx - 460) + "px"; }
        else
        { div_tt.left = (mx + 10) + "px"; }
        if (my > 300)
            div_tt.top = (my - 300) + "px";
        else
            div_tt.top = (my - 100) + "px";
    }
    function hide() {
        document.getElementById("ToolTip").style.visibility = "hidden";
    };
</script>
@model Project_2._2.ViewModels.CarList_ViewModel
<div id="ToolTip" style="width:auto ; height:auto; border:2px solid red; position:fixed; z-index:999; border-radius:10px; visibility:hidden">
    <img id="hinh" width="450" />
</div>
<div class="ContentLeft-child">
    <div class="ContentRight-child-head">Thông Tin Xe @Model.name</div>
    <div class="ContentRight-child-logo"></div>
    <div class="ContentRight-child-body Box_sp" style="color: black; font-weight: normal">
            <div>
                <div style="padding:10px 0 0 0; ">
                    <table style="width:100%" border="0">
                        <tr>
                            <td style="width:40%">
                                <div style="height: auto; border: 2px solid red; border-radius: 10px; margin-left: 20px ; margin-right:10px">
                                    <img src="~/Images/Cars/@Model.hinh" style="cursor:pointer" width="370" height="330" onmouseover="dotooltip('/Images/Cars/@Model.hinh')" onmouseout="    hide()" />
                                </div>
                            </td>
                            <td style="width:58% ; padding-top:15px">
                                <table class="tablesorter" style="line-height:35px ; width:100% ;font-size:medium ; border-bottom-style:solid ;" border="0">
                                    <tr style="background-color:#f2b77e">
                                        <td style="font-weight: bold; padding-left: 10px; text-align: left; text-align: left; font-family: 'Times New Roman'; font-size: 15px "> Tên Xe Thuê </td>
                                        <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px">
                                            @Model.name
                                        </td>
                                    </tr>
                                    <tr style="background-color: #5df2a7">
                                        <td style="font-weight: 700; padding-left: 10px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Hiệu Xe</td>
                                        <td style=" font-style: italic; font-weight: 600; padding-left: 30px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                            @Model.THieu
                                        </td>
                                    </tr>
                                    <tr style="background-color:#f2b77e">
                                        <td style="font-weight: 700; padding-left: 10px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">Dòng Xe</td>
                                        <td style=" font-style: italic; font-weight: 600; padding-left: 30px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                            @Model.DongXe
                                        </td>
                                    </tr>
                                    <tr style="background-color: #5df2a7">
                                        <td style="font-weight: 700; padding-left: 10px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">Đời Xe</td>
                                        <td style=" font-style: italic; font-weight: 600; padding-left: 30px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                            @Model.DoiXe
                                        </td>
                                    </tr>
                                    <tr style="background-color: #f2b77e">
                                        <td style="font-weight: 700; padding-left: 10px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">Loại Xe</td>
                                        <td style=" font-style: italic; font-weight: 600; padding-left: 30px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                            @Model.Loai
                                        </td>
                                    </tr>
                                    <tr style="background-color: #5df2a7">
                                        <td style="font-weight: bold; padding-left: 10px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Màu Xe  </td>
                                        <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                            @Model.Color
                                        </td>
                                    </tr>
                                    <tr style="background-color:#f2b77e">
                                        <td style="font-weight: bold; padding-left: 10px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Giá Cho Thuê </td>
                                        <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                            @string.Format("{0:#,### VNĐ}", @Model.Gia)
                                        </td>
                                    </tr>

                                    <tr style="background-color: #5df2a7">
                                        <td style="font-weight: bold; padding-left: 10px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">Trạng Thái Xe </td>
                                        <td style="padding-left: 30px; font-style: italic; font-weight: 600; padding-right: 20px; text-align: left; width: 67%; font-family: 'Times New Roman'; font-size: 15px; ">
                                            @Model.TThai
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="text-align:right;">
                                            <a href="@Url.Action("TrangChu", "Default")" class="Button" style=" margin-top:5px ;color:white">Quay Về Trang Chủ</a>
                                            <a href="@Url.Action("DatXe_Nhanh", "Default", new { carid = Model.id , dvid = @Model.dichvuID , giaxe = @Model.Gia })" class="Button" style=" margin-top:5px ;color:white">Đặt Thuê Xe</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="100%" colspan="2"> 
                                <div id="tabs" style="margin-top:10px;">
                                    <ul>
                                        <li><a href="#tabs-1">Giới Thiệu Về Xe</a></li>
                                        <li><a href="#tabs-2">Chi Tiết Xe Cho Thuê</a></li>
                                        <li><a href="#tabs-3">Video Giới Thiệu Xe</a></li>
                                    </ul>
                                    <div id="tabs-1">
                                        <table class="tablesorter" style="line-height:35px ; width:100% ;font-size:medium ; border-bottom-style:solid" border="0">
                                            <tr style="background-color:#f2b77e">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Tên Xe Thuê </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px">
                                                    @Model.name
                                                </td>

                                            </tr>
                                            <tr style="background-color: #5df2a7">
                                                <td style="font-weight: 700; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">Thương Hiệu Xe</td>
                                                <td style=" font-style: italic; font-weight: 600; padding-left: 30px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @Model.THieu
                                                </td>
                                            </tr>

                                            <tr style="background-color:#f2b77e">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Loại Xe </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @Model.Loai
                                                </td>
                                            </tr>
                                            <tr style="background-color: #5df2a7">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Dịch Vụ Cho Thuê </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @Model.tendichvu
                                                </td>
                                            </tr>
                                            <tr style="background-color:#f2b77e">
                                                <td style="font-weight: 700; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">Dòng Xe</td>
                                                <td style=" font-style: italic; font-weight: 600; padding-left: 30px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @Model.DongXe
                                                </td>
                                            </tr>

                                            <tr style="background-color: #5df2a7">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Đời Xe </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @Model.DoiXe
                                                </td>
                                            </tr>
                                            <tr style="background-color:#f2b77e">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Màu Xe  </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @Model.Color
                                                </td>
                                            </tr>

                                            <tr style="background-color: #5df2a7">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Phụ Trợ Quá KM </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @string.Format("{0:#,### VNĐ}", @Model.PhuTroKM)
                                                </td>
                                            </tr>
                                            <tr style="background-color:#f2b77e">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Phụ Trơ Ngoài Giờ </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @string.Format("{0:#,### VNĐ}", @Model.PhuTroNgoaiGio)
                                                </td>
                                            </tr>
                                            <tr style="background-color: #5df2a7">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Sử Dụng Cuối Tuần  </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @string.Format("{0:#,### VNĐ}", @Model.SuDungCuoiTuan)
                                                </td>
                                            </tr>

                                            <tr style="background-color:#f2b77e">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; "> Giá Cho Thuê </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @string.Format("{0:#,### VNĐ}", @Model.Gia)
                                                </td>
                                            </tr>

                                            <tr style="background-color: #5df2a7">
                                                <td style="font-weight: bold; padding-left: 50px; text-align: left; font-family: 'Times New Roman'; font-size: 15px; ">Trạng Thái Xe </td>
                                                <td style="padding-left: 30px; font-style: italic; font-weight: 600; padding-right: 20px; text-align: left; width: 67%; font-family: 'Times New Roman'; font-size: 15px; ">
                                                    @Model.TThai
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="tabs-2">
                                    @Html.Raw(Model.ChiTiet)
                                    </div>
                                    <div id="tabs-3">
                                        <iframe width="100%" height="510" src="//@Model.Video" frameborder="0" allowfullscreen></iframe>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

